<template>
  <div>
      <div class='city-top'>
            <city-header></city-header>
            <city-search :cities="cities"></city-search>
      </div>
      <city-list 
        :cities="cities" 
        :hot="hotCities"
        :letter="letter"
      >
      </city-list>
      <city-alpha 
        :list="cities"
        :letter="letter"
        @change="handleLetterChange"
      >
      </city-alpha>
  </div>
</template>
<script>
import axios from "axios"
import CityHeader from "components/city/Header.vue"
import CitySearch from "components/city/Search.vue"
import CityList from "components/city/List.vue"
import CityAlpha from "components/city/Alphabet.vue"
export default {
    name:"City",
    data (){
        return{
            cities:{},
            hotCities:[],
            letter:""
        }
    },
    components:{
        CityHeader,
        CitySearch,
        CityList,
        CityAlpha
    },
    methods:{
       getCityInfo (){
          axios.get('/api/travel/city.json')
          .then(this.getCityInfoSucc)
       },
       getCityInfoSucc (res){
          res=res.data
          if(res.ret && res.data){
             const data=res.data
             this.hotCities=data.hotCities
             this.cities=data.cities
          }
       },
       handleLetterChange (e){
           this.letter=e
       }
    },
    mounted (){
        this.getCityInfo()
    }
}
</script>
<style lang="scss" scoped>
    .city-top{
        position: relative;
        z-index:9;
    }
</style>